<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h3>防抖(debounce)-在单位时间内，不管点了多少次，只有最后一次才会被执行。</h3>	
					
			<input type="button" value="点进行支付操作" @click="calc" />
			
			<h3>节流(throttle)-在单位时间内，不管点了多少次，只有第一次才会被执行。</h3>
					
			<input type="button" value="点进行支付操作" @click="calc2" />
		</div>
		 
	</body>
	
	
	
	
	<script src="../js/vue.js"></script>
	<script>
		
	  const app=new Vue({
	  	el:"#app",
	  	// 存放私有数据地址
	  	data:{
	  		 
	  	},
		methods: {
			calc(){ 			 
				debounce(this.sum,5000)(2,3);				
			},
			calc2(){ 
				throttle(this.sum,3000)(2,3);
			},
			sum(a,b) {
				alert(a+b);
			}
		}
	  });
		  
		  
		  // 保存定时器的引用对象
	  let timeout;
	  function debounce(func, wait) { 
	 
		// 返回的函数是用户实际调用的函数，它包含了防抖逻辑
		return function(...args) {
			// 保存当前的 this 上下文
			const context = this; 
	 
			// 清除之前的定时器，如果存在
			if (timeout){
				console.log("----清除之前的方法-------")
				clearTimeout(timeout); 
			}
	 
			// 设置一个新的定时器
			// 当指定的 wait 时间过后，将执行 func 函数
			// 并将当前的 this 上下文和参数传入
			timeout = setTimeout(function() {  
				// 执行原始函数，绑定正确的 this 上下文和参数
				console.log("-@@@@@@@@@分配定时器，准备要执行方法-@@@@@@@@@--")
				func.apply(context, args);  
			}, wait);  
		};
	}
	
	  // 是不是已经执行了
	 var inThrottle = false;
	function throttle(func, limit) { 
	  return function(...args) {
		const context = this; // 保存当前的 this 上下文 
		if (!inThrottle) {
			// 执行传入的函数
			func.apply(context, args);
			
			inThrottle = true; // 标记为正在节流
	 
			// 使用闭包和 setTimeout 来在指定的延迟后重置 inThrottle
			setTimeout(() => {
				inThrottle = false; // 重置节流状态
			}, limit);
		}
	  };
	}

		
	</script>
</html>